<template>
  <div style="position: fixed;
  top: 0;
width: 100%;
left: 0;
z-index: 10;">
<!--    <div :class="[styleNum==0?'topBarNormal':'titActive']" :style="setStyle()">-->
    <div class="topBarNormalBasic" >
      <div style="
          position: absolute;
          left: 0;
          top: 0;
          z-index: 10;
          color: white;
          padding: 14px 10px;
          font-size: 16px;

        "
           v-on:click="onClickLeft"
      ><van-icon name="arrow-left" />  返回</div>
      <div class="van-nav-bar" :style="setStyle()">收入统计</div>
      <div
          style="
          position: absolute;
          right: 0;
          top: 0;
          z-index: 10;
          color: white;
          padding: 14px 10px;
          font-size: 16px;
        "
      >
<!--        <van-switch-->
<!--            v-model="checked"-->
<!--            active-color="#354349"-->
<!--            inactive-color="#409eff"-->
<!--        />-->
        <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
        >
          <template #reference>
<!--            <van-button>浅色风格</van-button>-->
            <div style="margin-right: 4px"><van-icon name="setting-o" size="20px"/></div>
          </template>
        </van-popover>
      </div>
    </div>
    <!-- <div style="align-items: center;height: 70px;"> -->
<!--    <div id="tabNav" style="align-items: center; background: #fff;">-->
<!--      <van-tabs-->
<!--          style="width: 120px; margin: 0 auto"-->
<!--          v-model="active"-->
<!--          animated-->
<!--          :title-active-color="activeColor"-->
<!--          title-inactive-color="#aaa"-->
<!--          :color="activeColor"-->
<!--      >-->
<!--        <van-tab title="收入"></van-tab>-->
<!--        <van-tab title="支出"></van-tab>-->
<!--      </van-tabs>-->
<!--    </div>-->

  </div>
</template>

<script>
// import 引入的组件需要注入到对象中才能使用
import {Toast} from "vant";

export default {
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {

      activeColor: "#409EFF",
      active: 0,
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '主题一' ,val:0}, { text: '主题二' ,val:1}, { text: '主题三', val:2 }, { text: '主题四', val:3 }],
      selectNum: 0,

    }
  },
  // 计算属性 类似于 data 概念
  computed: {
    checked: {
      get() {
        return this.$store.state.checked
      },
      set(val) {
        this.$store.commit('changeChecked')
      }
    },
    styleNum: {
      get() {
        return this.$store.state.styleNum
      },
      set(val) {
        this.$store.commit('changeStyleNum', this.styleNum)
      }
    },
    navBarStyles: {
      get() {
        return this.$store.state.navBarStyles
      },
    }

  },
  // 监控 data 中的数据变化
  watch: {
    checked(a,b){
      this.checked?this.activeColor = '#354349':this.activeColor = "#409EFF"
    },
    // styleNum: {
    //
    // }
  },
  // 方法集合
  methods: {
    onSelect(action) {
      // Toast(action.val);
      this.$store.commit('changeStyleNum', action.val);
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    setStyle() {
      // console.log(this.styleNum)
      return {
        "background": this.navBarStyles[this.styleNum]
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },

}
</script>

<style lang="less">
.titActive {
  position: relative;
  .van-nav-bar {
    background: linear-gradient(to right, #636b6f, #354349);
    //background: linear-gradient(to right, #879196, #354349);

    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    overflow: hidden;
    padding: 14px 0;
    color: white;
    font-size: 18px;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }
}

.topBarNormal {
  position: relative;
  .van-nav-bar {
    background: linear-gradient(to right, #68b5fd, #409eff);
    //background: linear-gradient(to right, hsl(210, 69%, 82%), #409eff);

    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    overflow: hidden;
    padding: 14px 0;
    color: white;
    font-size: 18px;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }
}

.test {
  background: linear-gradient(to right, #ea9ff4, #d252ef);
}

.topBarNormalBasic {
  position: relative;
  .van-nav-bar {

    //background: linear-gradient(to right, hsl(210, 69%, 82%), #409eff);

    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    overflow: hidden;
    padding: 14px 0;
    color: white;
    font-size: 18px;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #fff;
  }
}

#tabNav .van-tab {
  font-size: 16px;
}
</style>